<template>
  <div class="wel-main">

    <el-dialog
      title="提示"
      :visible.sync="isShowSelectTeacher"
      width="80%"
      style="min-height: 70vh"
    >
            <div class="main-select">
        <div class="select" >
          <div class="select-item" v-for="(item,index) in userList" :key='index' @click="totoken(item)">
            <div class="item-img">
              <img src="../../assets/welcome_images/teacher-img.png" alt="">
            </div>
            <div class="item-teacher" >
              <div class="teacherName">{{item.name}}</div>
              <div class="teacherSchoolName">{{item.pscShName}}</div>
            </div>
          </div>

        </div>

      </div>
    </el-dialog>
    <div class="main-center">
      <div class="center-left">
        <div class="left-welcomeTips">Welcome to </div>
        <div class="left-welcomeTitle">5G-智慧体育平台</div>
        <div class="left-welcomeButton">
          <button @click="login">进入</button>
        </div>
      </div>
      <div class="center-right">
        <img src="../../assets/welcome_images/wel-ggimg.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios"
import {xcGetToken,getUserXc,xcLogin} from "@/api/login";

export default {
  name: "index",
  data(){

    return {
      userList:[],
      isShowSelectTeacher:false,
      accessToken:""
    }
  },
  mounted() {
  },
  methods:{
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    decodeEntities(encodedString) {
      var textarea = document.createElement('textarea');
      textarea.innerHTML = encodedString;
      return textarea.value;
    },
    login(){
      let code = this.getUrlCode("code");
      if(code){
        xcGetToken().then(response=>{
          if(response == '请求失败'){
            this.$message.error("认证失败")
          }
          let responseJson = JSON.parse(this.decodeEntities(response));
          if(responseJson.expires_in == '43199'){
            this.accessToken = responseJson.access_token;
            let formData = new FormData();
            formData.append("code", code);
            formData.append("authorization", this.accessToken);
            axios.post(this.$env.BASE_URL+"/user/xinChanHttpProxy/get-user-info",formData,{
              headers: {
                "content-type": "multipart/form-data"
              }
            },).then(res=>{
              let resJson = JSON.parse(this.decodeEntities(res.data));
              if(resJson.code == 0){
                xcLogin({userName:resJson.data.username}).then(user=>{
                  if(user.code == 200){
                    this.$message.success("登陆成功");
                    this.userList = user.result.userInfo;
                    if(this.userList.length==1){
                      this.$store.commit("user/SET_TOKEN", this.userList[0].token);
                      this.$store.commit("user/SET_INFO", this.userList[0]);
                      window.sessionStorage.setItem("token", this.userList[0].token);
                      this.goIndex();
                      window.sessionStorage.setItem("userInfo", JSON.stringify(this.userList[0]))
                    }else{
                      this.isShowSelectTeacher = true;
                    }
                  }else{
                    this.$message.error("用户不存在")
                  }
                })
              }else{
                this.$message.error(resJson.msg);
              }

            })
          }else{
            this.$message.error("获取用户信息失败")
          }
        })

      }else{
        this.$message.error("未获取到授权码")
      }
      console.log(code);


    },
    totoken(item){
      this.$store.commit("user/SET_TOKEN", item.token);
      this.$store.commit("user/SET_INFO", item);
      window.sessionStorage.setItem("token", item.token)
      window.sessionStorage.setItem("userInfo", JSON.stringify(item));
      this.goIndex();
    },
    goIndex(){
      this.$router.push("/index");
    }
  }
}
</script>

<style lang="scss" scoped>
.wel-main {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/welcome_images/backGG.png") no-repeat;
  background-size:100% 100% ;
  display: flex;
  justify-content: center;
  align-items: center;
  .main-center {
    width: 80vw;
    height: 80vh;
    display: flex;
    .center-left {
      width: 60%;
      color: #fff;
      .left-welcomeTips{
        font-size: 3vw;
        margin-top: 10vh;
      }
      .left-welcomeTitle{
        font-size: 4vw;
        margin-top: 2vh;

      }
      .left-welcomeButton {
        margin-top: 25vh;
        button {
          width: 20vw;
          height: 5vh;
          background: #5DB8F6;
          border: none;
          color: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 16px;
          font-size: 1.5vw;
        }

      }
    }
    .center-right {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 100%;
        height: 50%;
        object-fit: contain;
      }
    }
  }
}
.main-select {
  width: 100%;
  background: rgb(255,255,255);
  border-radius: 32px;
  height: 70%;
  .select{
    display: flex;
    flex-flow: wrap;
    padding: 0 3vw;
    .select-item{
      margin-top: 3vh;
      display: flex;
      width: 18%;
      margin-left: 1vw;
      height: 10vh;
      background: #D8F0FD;
      border-radius: 16px;
      border: 3px solid #BCE3FC;
      .item-img{
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 80%;
          height: 80%;
          object-fit: contain;
        }
      }
      .item-teacher{
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .teacherName{
          font-size: 1.2vw;
          margin-top: 1,2vh;
          font-weight: bold;
        }
        .teacherSchoolName{
          margin-top: 2vh;
          font-size: 1vw;
          color: #787C7E;
        }
      }
    }
  }

}

</style>
